import React, { useState, useReducer } from "react"
import { useRequest } from "ahooks"
import { Button, Input, Select, ConfigProvider, InputNumber } from "antd"
import { useImmer } from "use-immer"
import Page from "@/components/layout/page/Page"
function getUsername(id) {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve(`${id} - username`)
    }, 1000)
  })
}
const Index = () => {
  const [state, setState] = useState("")
  const [data, setData] = useImmer({
    hello: "world",
    count: 0
  })
  const {
    data: username,
    run: set,
    mutate
  } = useRequest(getUsername, {
    defaultParams: [1],
    onSuccess: (data) => {
      mutate(data.replace("username", "new username"))
    }
  })

  const onChange = () => {
    set(state)
  }
  const handleChange = (value) => {
    console.log(`selected ${value}`)
  }

  const [count, countDispatch] = useReducer((state, action) => {
    switch (action.type) {
      case "increment":
        if (state >= 10) return 10
        return state + 1
      case "decrement":
        if (state <= 0) return 0
        return state - 1
      case "input":
        return action.payload
      default:
        return state
    }
  }, 0)

  return (
    <ConfigProvider
      theme={{
        components: {
          // Input: {
          //   colorBgContainer: "transparent",
          //   colorBorder: "#00A0E9",
          //   hoverBorderColor: "#00A0E9",
          //   activeBorderColor: "#00A0E9",
          //   activeShadow: "#00A0E9"
          // },
          // Select: {
          //   colorBgContainer: "transparent",
          //   colorBorder: "#00A0E9 ",
          //   hoverBorderColor: "#00A0E9",
          //   activeBorderColor: "#00A0E9",
          //   activeOutlineColor: "transparent"
          //   // colorBgElevated: "#6F6F67"
          // }
        }
      }}
    >
      <Page>
        <div className="w-960px h-full">
          <Input
            onChange={(e) => setState(e.target.value)}
            value={state}
            placeholder="Please enter userId"
            style={{ width: 240, marginRight: 16 }}
          />
          <Button type="primary" onClick={onChange}>
            GetUserName
          </Button>
          <p>Username: {username}</p>
          <pre>{JSON.stringify(data, null, 2)}</pre>
          <p>
            <Button
              onClick={() => {
                setData((draft) => {
                  draft.count++
                })
              }}
            >
              count + 1
            </Button>
          </p>
          <div>
            <Select
              className="w-200px"
              placeholder="Please select"
              allowClear
              onChange={handleChange}
              options={[
                {
                  value: "jack",
                  label: "Jack"
                },
                {
                  value: "lucy",
                  label: "Lucy"
                }
              ]}
            />
          </div>
          <div>
            <span>{count}</span>
            <div>
              <Button onClick={() => countDispatch({ type: "decrement" })}>-</Button>
              <InputNumber
                min={0}
                max={10}
                defaultValue={0}
                onChange={(e) => countDispatch({ type: "input", payload: e })}
              />
              <Button onClick={() => countDispatch({ type: "increment" })}>+</Button>
            </div>
          </div>
        </div>
      </Page>
    </ConfigProvider>
  )
}
export default Index
